<template>
    <div>
        <div class="mvlists" ref="mvlists">
            <ul>
                <li v-for="(item,index) in mvList" :key="index">
                    <div class="imgs" v-show="playNum != index" @click="getUrlShow(index,item.id)" :style="{'background-image':'url('+item.cover+')'}">
                        <span class="iconfont icon-arrow-right-filling"></span>
                    </div>
                    <div class="imgs" v-show="playNum == index" @click="mvPlayend">
                        <video :src="item.mvurl" :ref="'video'+index" controls @loadeddata="loadeddataFun($event)"></video>
                    </div>
                    <p>
                        {{item.name}}
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import {getMvList,getMvUrl} from '../api/mv'
export default {
    data() {
        return {
            mvList:[],
            playNum:null,
            offset:0,
            flag:true
        }
    },
    created() {
        getMvList({
            limit:5,
            offset:this.offset
        }).then(data=>{
            console.log(data);
            this.mvList = data.data;
            console.log(this.mvList);
        })
    },
    methods: {
        getUrlShow(index,id){
            if(this.playNum || this.playNum == 0){
                this.$refs['video'+this.playNum][0].pause();
            }
            this.playNum = index;
            getMvUrl({id}).then(data=>{
                console.log(data);
                this.$set(this.mvList[index],"mvurl",data.data.url)
            })
        },
        loadeddataFun(event){
            event.target.play();
        },
        mvPlayend(){
            this.$refs['video'+this.playNum][0].pause();
            this.playNum = null;
        },
        addData(){
            //防抖
            if(this.flag){
                this.flag = false;
                this.offset +=5;
                getMvList({
                    limit:5,
                    offset:this.offset
                }).then(data=>{
                    console.log(data);
                    this.mvList = this.mvList.concat(data.data);
                    this.flag = true;
                })
            }
        },
        //滚动条监听
        handleScroll(){
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            let lis = this.$refs.mvlists.getElementsByTagName("li");
            let num = lis.length;
            let liHeight = lis[num-3].offsetTop;
            // console.log(liHeight);
            if(scrollTop > liHeight){
                this.addData();
            }
        }
    },
    mounted() {
        this.$nextTick(()=>{
            //监听滚动事件
            window.addEventListener("scroll",this.handleScroll)
        })
    },
    beforeDestroy() {
        window.removeEventListener("scroll",this.handleScroll);
    },
}
</script>
<style lang="less">
.mvlists{
    width: 100%;
    li{
        margin-bottom: 10px;
        .imgs{
            width: 100%;
            height: 211px;
            background-repeat: no-repeat;
            background-size: contain;
            position: relative;
            margin: 0 auto;
            span{
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                margin: auto;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background-color: rgba(0,0,0,0.5);
                border-radius: 50%;
                color: white;
                font-size: 18px;
            }
            video{
                height: 211px;
                margin: 0 auto;
                display: block;
            }
        }
        p{
            font-size: 14px;
            padding: 10px;
        }
    }
}
</style>